<template>
  <div class="sign-wrap">
    <img src="../../assets/logo.png" class="logo" title="logo">
    <h3>登陆</h3>
    <span v-show="showTips">{{tips}}</span>
    <div class="sign-input">
      <input type="text" placeholder="请输入用户名" v-model="username"/>
    </div>
    <div class="sign-input">
      <input type="password" placeholder="请输入密码" v-model="password"/>
    </div>
    <button v-on:click="login">登陆</button>
    <p v-on:click="toRegist">没有账号？马上注册</p>
  </div>
</template>

<script>
  import {setCookie, getCookie} from "../../assets/js/cookie";

  export default {
    name: "login",
    data() {
      return {
        showTips: false,
        tips: '',
        username: '',
        password: ''
      }
    },
    mounted() {
      if (getCookie('username')) {
        this.$router.push('/home');
      }
    },
    methods: {
      login() {
        if (this.username == '' || this.password == '') {
          alert('请输入用户名或密码');
        } else {
          let data = {'uName': this.username, 'uPass': this.password};
          console.log('name:' + data.uName + ' ,' + 'pass:' + data.uPass);
          // 接口请求
          this.$http.post('api/user/login.do', data).then((res) => {
            console.log(res.data);
            if (res.data.state == 1) {
              this.tips = res.data.msg;
              this.showTips = true;
            } else if (res.data.state == 2) {
              this.tips = res.data.msg;
              this.showTips = true;
            } else {
              this.tips = res.data.msg;
              this.showTips = true;
              setCookie('username', this.username, 1000*60);
              setTimeout(function () {
                if (this.username == 'admin') {
                  this.$router.push('/admin');
                } else {
                  this.$router.push('/home');
                }
              }.bind(this), 1000);
            }
          }).catch((res) => {
            console.log(res.data.msg);
          })
        }
      },
      toRegist() {
        this.$router.push('/regist');
      }
    }
  }
</script>

<style scoped lang="less">
  .sign-wrap {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    .logo {
      width: 2rem;
      height: 2rem;
    }
    h3 {
      font-size: 0.36rem;
      line-height: 1rem;
      font-weight: normal;
    }
    span {
      font-size: 0.28rem;
      color: #ff0000;
      line-height: 0.4rem;
    }
    .sign-input {
      width: 5.5rem;
      height: 0.4rem;
      padding: 0.15rem 0.2rem;
      border-bottom: 1px solid #cccccc;
      margin: 0 auto 0.4rem;
      input {
        width: 100%;
        height: 0.4rem;
        background-color: transparent;
        display: block;
        border: none;
        outline: none;
        font-size: 0.28rem;
        color: #666666;
        line-height: 0.4rem;
      }
    }
    button {
      width: 2rem;
      height: 0.7rem;
      background-color: #41b883;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      border: none;
      outline: none;
      margin: 0.5rem auto 0.3rem;
      display: block;
      font-size: 0.28rem;
      color: #ffffff;
      line-height: 0.7rem;
      text-align: center;
    }
    p {
      font-size: 0.28rem;
      color: #41b883;
      line-height: 0.4rem;
    }
  }
</style>
